<template>
  <div class="activity">
    <div class="title"><h3>投诉管理
    </h3><span>用于管理小区里业主的投诉信息（app端来的数据）</span></div>
    <div class="nav">
      <el-form label-width="20px">
        <div class="left">

          <el-form-item>
            <div>小区名称</div>
            <SelectView v-model="queryData.community_code" />
          </el-form-item>

          <el-form-item>
            <el-form-item>
              <div>投诉名称</div>
              <el-input v-model="queryData.title" size="small" placeholder="请输入" />
            </el-form-item>
          </el-form-item>

          <el-form-item>
            <div>匿名状态</div>
            <el-select v-model="queryData.status" placeholder="请选择" size="small">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>

          <el-form-item>
            <div class="time">创建时间</div>
            <el-date-picker
              v-model="time"
              style="width:200px"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="timestamp"
              @change="pickerChange"
            />
          </el-form-item>
        </div>
        <div class="right">
          <el-form-item>
            <el-button size="small" @click="reset">重置</el-button>
            <el-button size="small" type="primary" @click="inquire">查询</el-button>
          </el-form-item>
        </div>
      </el-form>
    </div>
    <div class="content">
      <el-table
        :data="List"
        style="width: 100%"
      >
        <el-table-column
          prop="id"
          label="ID"
          width="50"
        />
        <el-table-column
          prop="community.name"
          label="小区名称"
        >
          <template scope="{row}">
            {{ row.community?.name || "铜陵新村" }}
          </template>
        </el-table-column>

        <el-table-column
          prop="title"
          label="投诉名称"
        />
        <el-table-column
          label="图片"
          width="160px"
        >
          <template scope="{row}">
            <el-image
              v-if="row.an_photo"
              style="width: 100px; height: 100px"
              :src="row.an_photo[0]"
              :preview-src-list="row.an_photo"
            />
            <el-image
              v-else
              style="width: 100px; height: 100px"
              src="http://124.223.14.236:8881/public/dist/static/empty.1e2fbc24.png"
              :preview-src-list="srcList"
            />
          </template>
        </el-table-column>
        <el-table-column
          prop="address"
          label="匿名状态"
        >
          <template scope="{row}">
            <span>{{ row.status===1?"匿名":"不匿名" }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="nember"
          label="投诉人"
        >
          <template slot-scope="{ row }">
            <div>{{ row.nember?row.nember:"未知" }}</div>
          </template>
        </el-table-column>
        <el-table-column
          prop="tel"
          label="联系方式"
        />
        <el-table-column
          label="创建时间"
        >
          <template slot-scope="{ row }">
            <div>{{ moment(row?.create_time) }}</div>
          </template>
        </el-table-column>
        <el-table-column
          prop="address"
          label="操作"
        >
          <template scope="{row}">
            <el-button type="text" @click="edit(row.id)">查看并回复</el-button>
            <el-button type="text" @click="dell(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页器 -->
    <el-pagination
      :current-page="queryData.current"
      :page-sizes="[5,10,15]"
      :page-size="queryData.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
    <!-- 弹框 -->
    <MyComplain ref="asideView" @btnOk="getActivityList()" />
  </div>
</template>

<script>
import moment from 'moment'
import SelectView from './components/selectView.vue'
import MyComplain from './components/complainDrawer'
import { getComplainListAPI, dellComplainAPI } from '@/api/hujingbo/complain'
export default {
  name: 'Complain',
  components: {
    SelectView,
    MyComplain
  },
  data() {
    return {
      List: [],
      queryData: {
        current: 1,
        pageSize: 5,
        create_time: '',
        status: '',
        title: '',
        community_code: ''
      },
      total: 0,
      srcList: ['http://124.223.14.236:8881/public/dist/static/empty.1e2fbc24.png'],
      options: [
        { value: 0,
          label: '不匿名' },
        { value: 1,
          label: '匿名' }
      ],
      time: ''
    }
  },
  created() {
    this.getActivityList()
  },
  methods: {
    // 获取数据渲染列表
    async getActivityList() {
      const res = await getComplainListAPI(this.queryData)
      console.log()
      this.List = res.data.rows.map(item => {
        return { ...item, an_photo: item.an_photo ? item.an_photo.split(',').map(item => {
          return this.$webURL + item
        }) : null }
      })
      this.total = res.data.count
    },
    // 分页器切换条数
    handleSizeChange(e) {
      this.queryData.pageSize = e
      this.getActivityList()
    },
    // 分页器切换当前页
    handleCurrentChange(e) {
      this.queryData.current = e
      this.getActivityList()
    },
    // 查询
    inquire() {
      this.queryData.current = 1
      this.getActivityList()
    },
    // 重置
    reset() {
      this.queryData = {
        current: 1,
        pageSize: 5,
        create_time: '',
        status: '',
        title: '',
        community_code: ''
      }
      this.time = ''
      this.getActivityList()
    },
    pickerChange(e) {
      console.log(e)
      this.queryData.create_time = e?.join(',')
    },
    // 修改
    edit(id) {
      console.log(123)
      this.$refs.asideView.echoRepair(id)
      setTimeout(() => {
        this.$refs.asideView.drawer = true
      }, 300)
    },
    // 删除
    async dell(id) {
      if (this.queryData.current > 1 && this.List.length === 1) {
        this.queryData.current--
      }
      await this.$confirm('确定删除吗？')
      await dellComplainAPI(id)
      this.getActivityList()
      this.$message.success('删除成功')
    },
    // 处理时间
    moment(time) {
      return moment(time).format('YYYY-MM-DD')
    }
  }
}
</script>

<style  lang="scss" scoped>
.activity{
padding: 30px 30px 0 30px;
.title{
display: flex;
span{
  padding: 22px 0 0 20px;
  font-size: 14px;
  color: #585858;
}
}
.nav{
  padding: 10px 30px 10px 0;
  background-color: #fff;
  height: 110px;
  .el-form{
    justify-content: space-between;
    display: flex;
    .left{
          display: flex;
          .time{
            padding-left: 24px;
          }
    }
    .right{
      margin-top: 35px;
    }
  }

}
.content{
  padding: 20px 20px;
  margin-top: 20px;
  background-color: #fff;
}
  .el-pagination{
   float: right;
  }
}
</style>
